<div class="row">
  <div class="container">
    <div class="carousel">
      <h3><i class="iconfont">&#xe629;</i>{{ heading_title }}</h3>
      <div class="carousel-content">
        <div class="col-md-6 single hidden-xs hidden-sm">
          {% if href %}
            <a href="{{ href }}" target="_blank">
          {% endif %}
            <img src="{{ recommend }}" class="img-responsive">
          {% if href %}
            </a>
          {% endif %}
        </div>
        <div class="col-md-6 single">
          {% if banners %}
            {% for key, banner in banners %}
              <div class="col-md-4 col-sm-4 col-xs-4 banner-item single {% if key % 2 == false %}banner-item-light{% endif %}">
                <a href="{{ banner.link }}">
                  <div class="banner-image">
                    <img src="{{ banner.image }}" alt="{{ banner.title }}">
                  </div>
                  <div class="banner-description col-sm-5">
                    <p class="banner-title">{{ banner.title }}</p>
                    <p class="banner-arrow"><i class="iconfont">&#xe604;</i></p>
                  </div>
                </a>
              </div>
            {% endfor %}
          {% endif %}
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#carousel{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 5,
	pagination: '.carousel{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
	autoplay: 2500,
	loop: true
});
--></script>
